<template>
	<span v-if="themeBar">
		<vab-remix-icon icon="palette-line" :title="lan.title" @click="handleOpenThemeBar" :style="'color:' + color"
			class="topIco" />
		<div class="theme-bar-setting" v-if="false">
			<!--全局漂浮的-->
			<div @click="handleOpenThemeBar">
				<vab-remix-icon icon="palette-line" :style="'color:' + color" />
				<p>{{lan.title}}</p>
			</div>
		</div>

		<el-drawer :title="lan.title" :visible.sync="drawerVisible" direction="rtl" append-to-body size="310px">
			<el-scrollbar style="height: 94vh; overflow: hidden">
				<div class="el-drawer__body">
					<el-form ref="form" :model="theme" label-position="top" :inline="false">
						<el-form-item :label="lan.theme" v-if="false">
							<el-radio-group v-model="theme.name">
								<el-radio-button label="default">{{lan.themeDefault}}</el-radio-button>
								<el-radio-button label="green">{{lan.themeGreen}}</el-radio-button>
								<el-radio-button label="glory">{{lan.themeGlory}}</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item :label="lan.layout">
							<el-radio-group v-model="theme.layout" :disabled="handleIsMobile">
								<el-radio-button label="horizontal">{{lan.horizontal}}</el-radio-button>
								<el-radio-button label="vertical">{{lan.vertical}}</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item :label="lan.tabsBar">
							<el-radio-group v-model="theme.tabsBar">
								<el-radio-button :label="true">{{lan.true}}</el-radio-button>
								<el-radio-button :label="false">{{lan.false}}</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item :label="lan.header">
							<el-radio-group v-model="theme.header">
								<el-radio-button label="fixed">{{lan.fixed}}</el-radio-button>
								<el-radio-button label="noFixed">{{lan.noFixed}}</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item :label="lan.recordValue">
							<el-radio-group v-model="theme.recordValue">
								<el-radio-button :label="true">{{lan.true}}</el-radio-button>
								<el-radio-button :label="false">{{lan.false}}</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item :label="lan.showHelperData" v-if="false">
							<el-radio-group v-model="showHelperData">
								<el-radio-button :label="true">{{lan.true}}</el-radio-button>
								<el-radio-button :label="false">{{lan.false}}</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" @click="handleSaveTheme">
								{{comLan.btnSave}}
							</el-button>
						</el-form-item>

						<el-form-item v-if="isListPage" :label="comLan.searchCondition" style="padding-top: 30px;">
							<el-button type="primary" @click="saveSearch">
								{{comLan.saveToDefault}}
							</el-button>
							<el-button type="primary" @click="resetSearch">
								{{comLan.btnReset}}
							</el-button>
						</el-form-item>

						<el-form-item v-if="isAddPage" :label="comLan.defaultAdd" style="padding-top: 30px;">
							<el-button type="primary" @click="saveAdd">
								{{comLan.saveToDefault}}
							</el-button>
							<el-button type="primary" @click="resetAdd">
								{{comLan.btnReset}}
							</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-scrollbar>
		</el-drawer>
	</span>
</template>

<script>
	import common from "@/common/common.js";

	export default {
		name: "VabThemeBar",
		data() {
			return {
				drawerVisible: false,
				drawerVisible2: false,
				theme: {
					name: "default",
					layout: "horizontal",
					header: "fixed",
					tabsBar: true,
					recordValue: true
				},
				showHelperData: false,
				themeDefault: {
					name: "default",
					//是否国定头部 固定fixed 不固定noFixed
					header: "fixed",
					//横纵布局 horizontal vertical
					layout: "horizontal",
					//是否开启主题配置按钮
					themeBar: true,
					//是否显示多标签页
					tabsBar: true,
				},
			};
		},
		props: {
			color: {
				type: String
			}
		},
		computed: {
			isListPage() {
				var r = common.baseVM.methods.isListPage(this.$route.path);
				return r;
			},

			isAddPage() {
				var r = common.baseVM.methods.isAddPage(this.$route.path);
				return r;
			},

			name() {
				return this.$store.state.theme.name;
			},
			layout() {
				return this.$store.state.theme.layout;
			},
			header() {
				return this.$store.state.theme.header;
			},
			tabsBar() {
				return this.$store.state.theme.tabsBar;
			},
			themeBar() {
				return this.$store.state.theme.themeBar;
			},
			recordValue() {
				return this.$store.state.theme.recordValue;
			},
			showHelper() {
				return this.$store.state.showHelper;
			},
			lan() {
				var lang = this.$store.state.language;
				var path = "VabThemeBar";
				var r = lang[path];
				if (r == null) return {};
				return r;
			},
			comLan() { //所有
				var comLanMethod = () => { //所有
					var lang = this.$store.state.language;
					if (lang == null) return {};
					return lang;
				};
				var r = comLanMethod();
				if (r == null) return {};
				return r;
			},
			handleIsMobile() {
				return common.tool.handleIsMobile();
			}
		},
		created() {
			common.getApp().$on("theme", () => {
				this.handleOpenThemeBar();
			});
			this.theme.name = this.name;
			this.theme.layout = this.layout;
			this.theme.header = this.header;
			this.theme.tabsBar = this.tabsBar;
			this.theme.themeBar = this.themeBar;
			this.theme.recordValue = this.recordValue;
			this.showHelperData = this.showHelper;
		},
		methods: {
			saveSearch() {
				var path = this.$route.path;
				var vueObj = window[path];
				if (vueObj == null || vueObj.search == null) {
					common.showToast(this.comLan.js.opFail, "error");
					return;
				}
				common.tool.setItem(path + "_search", vueObj.search);
				common.showToast(this.comLan.js.opSuccess, "success");
			},

			resetSearch() {
				var path = this.$route.path;
				var vueObj = window[path];
				if (vueObj == null || vueObj.search == null) {
					common.showToast(this.comLan.js.opFail, "error");
					return;
				}
				vueObj.resetVal('search');
				this.$nextTick(() => {
					common.tool.removeItem(path + "_search");
					common.showToast(this.comLan.js.opSuccess, "success");
				});
			},

			saveAdd() {
				var path = this.$route.path;
				var vueObj = window[path];
				if (vueObj == null || vueObj.model == null) {
					common.showToast(this.comLan.js.opFail, "error");
					return;
				}
				common.tool.setItem(path + "_model", vueObj.model);
				common.showToast(this.comLan.js.opSuccess, "success");
			},

			resetAdd() {
				var path = this.$route.path;
				var vueObj = window[path];
				if (vueObj == null || vueObj.model == null) {
					common.showToast(this.comLan.js.opFail, "error");
					return;
				}
				vueObj.resetVal('model');
				this.$nextTick(() => {
					common.tool.removeItem(path + "_model");
					common.showToast(this.comLan.js.opSuccess, "success");
				});
			},

			handleOpenThemeBar() {
				this.drawerVisible = true;
			},
			handleSetTheme(theme) {
				if (!this.handleIsMobile) {
					this.$store.dispatch("setTheme", JSON.parse(JSON.stringify(theme)));
				}
				this.$store.dispatch("setShowHelper", this.showHelperData);
				document.getElementsByTagName(
					"body"
				)[0].className = `vue-admin-beautiful-theme-${theme.name}`;
				this.drawerVisible = false;
			},
			handleSaveTheme() {
				this.handleSetTheme(this.theme);
			},
			handleSetDfaultTheme() {
				this.handleSetTheme(this.themeDefault);
				location.reload();
			},
			handleGetCode() {
				const url =
					"https://github.com/chuzhixin/vue-admin-beautiful/tree/master/src/views";
				let path = this.$route.path + "/index.vue";
				if (path === "/vab/menu1/menu1-1/menu1-1-1/index.vue") {
					path = "/vab/nested/menu1/menu1-1/menu1-1-1/index.vue";
				}
				if (path === "/vab/icon/awesomeIcon/index.vue") {
					path = "/vab/icon/index.vue";
				}
				if (path === "/vab/icon/remixIcon/index.vue") {
					path = "/vab/icon/remixIcon.vue";
				}
				if (path === "/vab/icon/colorfulIcon/index.vue") {
					path = "/vab/icon/colorfulIcon.vue";
				}
				if (path === "/vab/table/comprehensiveTable/index.vue") {
					path = "/vab/table/index.vue";
				}
				if (path === "/vab/table/inlineEditTable/index.vue") {
					path = "/vab/table/inlineEditTable.vue";
				}
				window.open(url + path);
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/css/variables.scss";

	@mixin right-bar {
		position: fixed;
		right: 0;
		z-index: $base-z-index;
		width: 60px;
		min-height: 60px;
		text-align: center;
		cursor: pointer;
		background: $base-color-blue;
		border-radius: $base-border-radius;

		>div {
			padding-top: 10px;
			border-bottom: 0 !important;

			&:hover {
				opacity: 0.9;
			}

			&+div {
				border-top: 1px solid $base-color-white;
			}

			p {
				padding: 0;
				margin: 0;
				font-size: $base-font-size-small;
				line-height: 30px;
				color: $base-color-white;
			}
		}
	}

	.theme-bar-setting {
		@include right-bar;

		top: calc((100vh - 110px) / 2);

		::v-deep {
			svg:not(:root).svg-inline--fa {
				display: block;
				margin-right: auto;
				margin-left: auto;
				color: $base-color-white;
			}

			.svg-icon {
				display: block;
				margin-right: auto;
				margin-left: auto;
				font-size: 20px;
				color: $base-color-white;
				fill: $base-color-white;
			}
		}
	}

	.el-drawer__body {
		padding: 20px;
	}
</style>
<style lang="scss">
	.el-drawer__wrapper {
		outline: none !important;

		* {
			outline: none !important;
		}
	}

	.vab-color-picker {
		.el-color-dropdown__link-btn {
			display: none;
		}
	}
</style>
